<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Qkids - 久趣英语</title>

    <style>

        body {
            font-family: "Microsoft YaHei","微软雅黑";
        }

        .bg {
            position: absolute;
            bottom: 0;

        }

        .main-img {
            width:60%;
            margin-left: calc( 20% - 45px) ;
        }

        .planet {
            width:120px;
            position: absolute;
            top:200px;
            left:200px;

            -webkit-animation: pAnimX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, pAnimY 2s cubic-bezier(0.36, 0, 0.64, 1)  infinite alternate;
            animation: pAnimX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, pAnimY 2s cubic-bezier(0.36, 0, 0.64, 1)  infinite alternate;
            -moz-animation: pAnimX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, pAnimY 2s cubic-bezier(0.36, 0, 0.64, 1)  infinite alternate;
        }

        .rocket {
            width:200px;
            position: absolute;
            top:100px;
            right:200px;

            -webkit-animation: rAnimX 2s cubic-bezier(0.36, 0, 0.64, 1) -0.5s infinite alternate, rAnimY 1s cubic-bezier(0.36, 0, 0.64, 1)  infinite alternate;
            animation: rAnimX 2s cubic-bezier(0.36, 0, 0.64, 1) -0.5s infinite alternate, rAnimY 1s cubic-bezier(0.36, 0, 0.64, 1)  infinite alternate;
            -moz-animation: rAnimX 2s cubic-bezier(0.36, 0, 0.64, 1) -0.5s infinite alternate, rAnimY 1s cubic-bezier(0.36, 0, 0.64, 1)  infinite alternate;

        }

        .error-msg {
            width:400px;
            position: absolute;
            bottom:70%;
            text-align: center;
            left: calc( 50% - 200px );
            color: rgba(135, 135, 135, 0.77);
        }

        .error-msg .code {
            font-size: 30px;
            font-weight: 600;
        }

        .error-msg .msg {
            font-size: 20px;
        }

        .return-btn {
             height:45px;
             line-height: 45px;
             width:180px;
             background-color: #46BEFF;
             text-align: center;
             border-radius: 20px;
             position: absolute;
             bottom: 10%;
             margin-left: calc( 50% - 90px );
             color: white;
             font-size: 14px;
            cursor:pointer;
         }

        @keyframes pAnimX {
            0% {
                left: 100px;
            }
            100% {
                left: 300px;
            }
        }

        @keyframes pAnimY {
            0% {
                top: 100px;
            }
            100% {
                top: 300px;
            }
        }


        @keyframes rAnimX {
            0% {
                right: 100px;
            }
            100% {
                right: 300px;
            }
        }

        @keyframes rAnimY {
            0% {
                top: 100px;
            }
            100% {
                top: 300px;
            }
        }

    </style>
</head>
<body>

<div class="bg">

    <img class="rocket" src="https://static-app.97kid.com/site-student/public/img/rocket.png">
    <img class="planet" src="https://static-app.97kid.com/site-student/public/img/planet.png" >
    <img class="main-img" src="https://static-app.97kid.com/site-student/public/img/404_bg.png">
    <div class="error-msg">
        <p class="code">404</p>
        <p class="msg">您所查看的页面无法浏览或不存在</p>
    </div>
    <a href="/"><div class="return-btn">返回首页</div></a>
</div>

</body>
</html>

<script type="text/javascript">

</script>

